<template>
  <view class="width-100">
    <view class="" v-if="datalist.length > 0">
      <view class="listWrap" v-for="(info, index) in datalist" :key="index">
        <view class="card" @click="gotoDeatil(info.id)">
          <view class="head flex flex-ai-c">
            <i-icon
              icon="icondianpu"
              type="single"
              size="32rpx"
              color="#FBB000"
            ></i-icon>
            <view class="head-name">{{ info.store_name }}</view>
            <i-icon
              v-if="info.store_status"
              class="icon-store"
              icon="iconmendianrenzheng"
              type="single"
              size="32rpx"
              color="#60C534"
            ></i-icon>
            <i-icon
              v-if="info.deposit_balance > 0"
              class="icon-store"
              icon="iconbao_1"
              type="single"
              size="28rpx"
              color="#eb5c02"
            ></i-icon>
            <view class="head-status">{{ orderStatus[info.status] }}</view>
          </view>
          <view class="main">
            <view class="line">
              <view class="name flex">
                <image
                  class="car-icon"
                  :src="info.brand_img"
                  mode="aspectFill"
                ></image>
                车型：
              </view>
              <view class="con">
                {{ info.car_name }}
              </view>
            </view>
            <view class="line" v-if="info.vin">
              <view class="name">VIN:</view>
              <view class="con">{{ info.vin }}</view>
            </view>
            <view class="line">
              <view class="name">需求配件：</view>
              <view class="con">
                <view
                  v-for="(item, index) in info.list"
                  :key="index"
                  class="item flex"
                >
                  <view class="item-left">{{ item.parts_name }}</view>
                  <view class="item-right">
                    <view>￥{{ item.price }}</view>
                    <view class="num">x{{ item.count }}</view>
                  </view>
                </view>
              </view>
            </view>
            <view class="line">
              <view class="con con-price">
                <text class="price-name">总价： </text
                ><text class="price">￥{{ info.total_money }}</text>
                <text class="price-name">实付款：</text>
                <text class="price2">￥{{ info.actual_payment }}</text>
              </view>
            </view>
          </view>
          <view
            class="footer flex flex-ai-c flex-jc-fe"
            v-show="goInPage === 'msg'"
          >
            <view class="right">
              <button class="custom-style" @click.stop="chat(index)">
                发送
              </button>
            </view>
          </view>
          <view
            class="footer flex flex-ai-c"
            v-show="tab === '0' && goInPage !== 'msg'"
          >
            <view class="left" v-if="info.status === 0">
              剩余付款时间： <text class="time">{{ info.closing_data }} </text>
            </view>
            <view class="left" v-else></view>
            <view class="right flex" v-if="info.status == 40">
              <button class="custom-style" @click.stop="gopay(info)">
                去付款
              </button>
            </view>
            <view class="right flex" v-else-if="info.status === 10">
              <button class="custom-style" @click.stop="chat(index)">
                <i-icon
                  class="btn-icon"
                  icon="iconxiaoxi"
                  type="single"
                  size="28rpx"
                  color="#333"
                ></i-icon>
                联系商家
              </button>
              <button class="custom-style" @click.stop="call(info.mobile)">
                <i-icon
                  class="btn-icon"
                  icon="iconlianxi"
                  type="single"
                  size="28rpx"
                  color="#333"
                ></i-icon>
                致电商家
              </button>
            </view>
            <view class="right flex" v-else-if="info.status === 20">
              <button
                class="custom-style"
                @click.stop="handleOrder('getGoods', info.id)"
              >
                确认收货
              </button>
            </view>
            <view class="right flex" v-else>
              <button
                class="custom-style2"
                @click.stop="handleOrder('del', info.id)"
              >
                删除订单
              </button>
              <button class="custom-style" @click.stop="continueFn">
                继续询价
              </button>
            </view>
          </view>
          <view
            class="footer flex flex-ai-c"
            v-show="tab === '1' && goInPage !== 'msg'"
          >
            <view class="left">
              {{ info.status === 10 ? '请务必将物流信息及时输入' : '' }}
            </view>
            <view class="right flex" v-if="info.status === 10">
              <button
                class="btn-logistics"
                shape="circle"
                @click.stop="gotoDeatil(info.id)"
              >
                <i-icon
                  class="btn-icon"
                  icon="iconwuliu"
                  type="single"
                  size="30rpx"
                  color="#333"
                ></i-icon>
                录入物流信息
              </button>
            </view>
            <view
              class="right flex"
              v-else-if="info.status === 0 || info.status === 20"
            >
              <button
                class="custom-style"
                shape="circle"
                @click.stop="chat(index)"
              >
                <i-icon
                  class="btn-icon"
                  icon="iconxiaoxi"
                  type="single"
                  size="28rpx"
                  color="#333"
                ></i-icon>
                {{ tab ? '联系买家' : '联系商家' }}
              </button>
              <button
                class="custom-style"
                shape="circle"
                @click.stop="call(info.mobile)"
              >
                <i-icon
                  class="btn-icon"
                  icon="iconlianxi"
                  type="single"
                  size="28rpx"
                  color="#333"
                ></i-icon>
                {{ tab ? '致电买家' : '致电商家' }}
              </button>
            </view>
            <view class="right flex" v-else>
              <button
                class="custom-style2"
                shape="circle"
                @click.stop="handleOrder('del', info.id)"
              >
                删除订单
              </button>
              <button
                class="custom-style"
                shape="circle"
                @click.stop="continueFn"
              >
                继续报价
              </button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 无内容默认图片 -->
    <view v-else-if="showimg">
      <defaultImg msg="暂无订单数据，快去下单吧"></defaultImg>
    </view>
  </view>
</template>

<script>
import defaultImg from '../../../../components/defaultImg/defaultImg'

export default {
  components: {
    defaultImg,
  },

  data() {
    return {
      contract_status: 'contract_status',
    }
  },

  props: ['tab', 'datalist', 'showimg', 'goInPage'],

  computed: {
    orderStatus() {
      if (this.tab === '0') {
        return this.$store.state.accessory.inquiryOrderStatus
      }
      return this.$store.state.accessory.quoteOrderStatus
    },
  },
  methods: {
    //订单详情
    gotoDeatil(id) {
      if (this.tab === '0') {
        uni.navigateTo({
          url:
            '/pages_order/accessoryOrder/inquiryOrderDetail/inquiryOrderDetail?id=' +
            id,
        })
      } else {
        uni.navigateTo({
          url:
            '/pages_order/accessoryOrder/quoteOrderDetail/quoteOrderDetail?id=' +
            id,
        })
      }
    },

    //确认收货
    confirmReceive(id) {
      this.$api.accessory
        .confirmReceive({
          id: id,
          store_id: this.$store.state.userInfoDetail.store.storeId,
        })
        .then((res) => {
          console.log(res)
          this.getInfo()
        })
        .catch((e) => {
          console.log(e)
        })
    },

    //继续询价 / 继续报价
    continueFn() {
      uni.navigateTo({
        url: '/pages_findAccessory/accessoryIndex/accessoryIndex',
      })
    },

    // 订单操作 删除订单 / 确认收货
    handleOrder(val, id) {
      this.$emit('handleOrder', {
        id: id,
        val: val,
      })
    },

    // 去付款
    gopay(data) {
      uni.navigateTo({
        url:
          '/pages_order/pay/pay?orderNo=' +
          data.id +
          '&price=' +
          data.total_money +
          '&type=accessory',
      })
    },

    // 去寻车
    goFindCar() {
      uni.navigateTo({
        url: '/pages_findCar/findtheCar/findtheCar',
      })
    },

    // 拨打电话
    call(phone) {
      uni.makePhoneCall({
        phoneNumber: phone, //仅为示例
      })
    },

    //联系卖家
    chat(index) {
      console.log(this.tab) // 0 联系商家 1 联系买家
      let carPartDetailsStr = ''
      for (let i = 0; i < this.datalist[index].list.length; i++) {
        if (i > 4) {
          break
        }
        carPartDetailsStr =
          carPartDetailsStr + this.datalist[index].list[i].parts_name + ' '
      }

      this.$store.commit('news/setCardInfo', {
        imgSrc: this.datalist[index].brand_img,
        name: this.datalist[index].car_name,
        carPartDetailsStr: carPartDetailsStr,
        type: 'accessoryOrder',
      })
      if (this.goInPage === 'msg') {
        this.$store.commit('news/backRoom', {
          backFlag: true,
          tab: this.tab,
        })
        uni.navigateBack({
          delta: 1,
        })
      } else {
        const storeId =
          this.tab === '0'
            ? this.datalist[index].store_sell_id
            : this.datalist[index].store_buy_id
        this.$store.commit('news/createConversationActive', {
          user: this.datalist[index].store_name, //店铺名称
          img: this.datalist[index].store_topimg, //店铺头像
          lastTime: '', //
          userId: storeId, //店铺id
          conversationID: 'C2C' + storeId,
        })

        uni.navigateTo({
          url: `/pages_news/contactSeller/contactSeller?user=${this.datalist[index].store_name}&pageId=${this.datalist[index].id}&tab=${this.tab}`,
        })
      }
    },
  },
}
</script>

<style scoped lang="scss">
@mixin point2() {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-all;
}

.width-100 {
  width: 100%;
  background-color: #f6f6f6;
}
.listWrap {
  width: 100%;
  border-radius: 10rpx;
  padding: 1%;
}

.card {
  box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.14);
  background: #fff;
  padding: 10rpx 24rpx;
  margin-bottom: 24rpx;
  border-radius: 10rpx;

  .head {
    height: 72rpx;
    border-bottom: 2rpx solid #f6f6f6;
    .head-name {
      padding-left: 16rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }

    .icon-store {
      padding-left: 16rpx;
    }

    .head-status {
      flex: 1;
      font-size: 26rpx;
      font-weight: 500;
      color: #eb5c02;
      text-align: right;
    }
  }

  .main {
    padding-top: 15rpx;

    .line {
      padding-bottom: 15rpx;
      display: flex;

      .name {
        padding-right: 20rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #999999;

        .car-icon {
          width: 50rpx;
          height: 36rpx;
          padding-right: 14rpx;
        }
      }

      .con {
        flex: 1;
        font-size: 26rpx;
        font-weight: 500;
        color: #333333;
        @include point2 .item {
          width: 100%;
          padding-bottom: 15rpx;

          .item-left {
            flex: 1;
          }

          .item-right {
            .num {
              color: #999;
              text-align: right;
            }
          }
        }

        .price-name {
          font-size: 24rpx;
          color: #999;
        }

        .price {
          font-size: 30rpx;
          color: #333;
          padding-right: 30rpx;
        }

        .price2 {
          font-size: 30rpx;
          color: #eb5c02;
        }
      }

      .con-price {
        text-align: right;
      }
    }
  }

  .footer {
    padding-bottom: 15rpx;

    .left {
      flex: 1;
      font-size: 26rpx;
      color: #999;
      font-weight: 500;

      .time {
        color: #333;
      }

      .left-num {
        font-size: 24rpx;
        color: #666;

        .orange {
          color: #eb5c02;
        }
      }
    }

    .right {
      .custom-style {
        margin-left: 24rpx;
        background: linear-gradient(-90deg, #fbd220, #ffe23e);
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
        height: 60rpx;
        line-height: 60rpx;
        width: 180rpx;
        padding-left: 0;
        padding-right: 0;
        border-radius: 30rpx;
      }

      .btn-icon {
        padding-right: 6rpx;
      }

      .custom-style2 {
        background: #fff;
        margin-left: 24rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
        height: 58rpx;
        line-height: 58rpx;
        width: 180rpx;
        border-radius: 29rpx;
        border: 1px solid #d0d0d0;
      }

      .btn-logistics {
        margin-left: 24rpx;
        background: linear-gradient(-90deg, #fbd220, #ffe23e);
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 30rpx;
        width: 267rpx;
      }
    }
  }
}

.custom-hover {
  opacity: 0.7;
  background: #f00;
}

/deep/ .u-hairline-border:after {
  border: none;
}
</style>
